
<template>

  <div id="app">


    <!-- 查询表单 -->
    <!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入"></el-input>
      </el-form-item>

      <!--      <el-form-item label="设备类型">-->
      <!--        <el-select v-model="formInline.sid" placeholder="全部"  clearable>-->
      <!--          <el-option  v-for="room in roomList" :label="room.name" :value="room.id"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <el-form-item label="性别">
        <el-select v-model="formInline.sex" placeholder="全部" clearable>
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="绑定设备">
        <el-select v-model="formInline.bdsb" placeholder="请选择" clearable>
          <el-option label="智能手表" value="智能手表"></el-option>
          <el-option label="头盔" value="头盔"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="证件号码">
        <el-input v-model="formInline.cert" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="通讯地址">
        <el-input v-model="formInline.address" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button type="danger" @click="qingkong">清空</el-button>

      </el-form-item>
    </el-form>

    <!--    <el-button type="info" @click="toAdd()" plain>添加</el-button>-->
    <!--    <el-button type="primary" @click="daochu()">导出</el-button>-->

    <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="姓名"
      >
      </el-table-column>

      <el-table-column
          prop="sex"
          label="性别"
      >
        <template slot-scope="scope">
          {{scope.row.sex==1?"男":"女"}}
        </template>
      </el-table-column>

      <el-table-column
          prop="age"
          label="年龄"
      >
      </el-table-column>
      <el-table-column
          prop="cert"
          label="证件号码"
      >
      </el-table-column>

      <el-table-column
          prop="ph"
          label="联系电话"
      >
      </el-table-column>

      <el-table-column
          prop="address"
          label="通讯地址"
      >
      </el-table-column>


      <el-table-column
          prop="bdsb"
          label="绑定设备">
        <template slot-scope="scope">
          {{scope.row.bh}}_{{scope.row.bdsb}}
        </template>
        >
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="findId(scope.row.id)" size="mini">预警定位</el-button>
          <el-button type="text" @click="findId(scope.row.id)" size="mini">实时定位</el-button>
          <el-button type="text" @click="Tofwgl(scope.row.id)" size="mini">健康档案</el-button>
        </template>

      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->

    <el-pagination

        @current-change="handleCurrentChange"

        :current-page="pageNum"

        :page-sizes="[10, 20, 30, 40]"

        :page-size="pageSize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

    </el-pagination>

    <el-dialog title="" :visible.sync="dialogFormVisible">

      <div id="container_1" style="width: 100%; height: calc(100vh - 100px)">

      </div>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">取 消</el-button>

      </div>

    </el-dialog>
    <!--    <div>-->
    <!--      <button @click="sendSms()">发送短信</button>-->
    <!--    </div>-->

  </div>

</template>

<style >

</style>

<script>

import axios from "axios"

import AMapLoader from "@amap/amap-jsapi-loader";



export default {

  data(){

    return{


      tableData:[],

      pageNum:1,

      pageSize:10,

      total:0,

      formInline:{},

      user:{},

      roomList:[],

      dialogFormVisible:false,

      infoWindowContent: {

        dqwz:''

      },

      tx:[],

      ruleForm:{},

      ruleForm2:{},

      imageUrl:"",
    }

  },

  methods: {

    async sendSms() {
      try {
        const response = await axios.post('http://localhost:9007/dx/send-sms', {
          signName: '智慧养老平台',
          templateCode: 'SMS_474936164',
          phoneNumbers: '17637908173',
          templateParam: JSON.stringify({ code: '1234', name: '张三', store: '北京市海淀区白水洼积云教育' })
        });
        console.log(response.data);
        alert('短信发送成功');
      } catch (error) {
        console.error('短信发送失败:', error);
        alert('短信发送失败: ' + error.response.data);
      }
    },







    Tofwgl(id) {

      this.$router.push({
        path: '/jkgl1',
        query: {
          id: id,
        }
      })
    },

    Addbz() {

      const marker = new AMap.Marker({

        position: new AMap.LngLat(...[this.longitude, this.latitude]),

        title: '点击我查看数据'

      });

      marker.setMap(this.map);

      const infoWindow = new AMap.InfoWindow({

        content: `<div style="text-align:center;">

姓名：${this.infoWindowContent.name}<br>
设备：${this.infoWindowContent.bh}_${this.infoWindowContent.bdsb}<br>
联系电话：${this.infoWindowContent.ph}<br>
地址：${this.infoWindowContent.address}<br>
当前地址：${this.infoWindowContent.address}<br>

定位状态：${this.infoWindowContent.state==1?"正常":"异常"}<br>

</div>`, // 弹窗内容

        offset: new AMap.Pixel(0, -30) // 弹窗偏移量

      });

      marker.on('click', () => {

        infoWindow.open(this.map, marker.getPosition());

      });

    },

    findPage() { //查询所有加分页参数

      this.axios.post(`http://localhost:9007/yjqj/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {

        console.log(res.data);

        this.tableData = res.data.data.records;

        this.total = res.data.data.total;

      })

    },

    getLocationByCoordinates() {

      // 创建逆地理编码实例

      const geocoder = new AMap.Geocoder();

      // 根据经纬度获取位置信息

      geocoder.getAddress([this.longitude, this.latitude], (status, result) => {

        if (status === 'complete' && result.info === 'OK') {

          this.infoWindowContent.dqwz = result.regeocode.formattedAddress;

        }

      });

    },


    qingkong() {

      this.formInline = {};

      this.findPage();

    },

    findId(id) {

      this.dialogFormVisible = true

      this.sendSms();
      this.initMap();

      this.axios.post(`http://localhost:9007/yjqj/findId?id=${id}`).then(res => {

        this.longitude = res.data.data.longitude;

        this.latitude = res.data.data.latitude;

        this.getLocationByCoordinates();
        this.infoWindowContent = res.data.data;
        this.goToLocation();
        this.Addbz();
      });
    },

    initMap() {

      AMapLoader.load({

        key: 'a523409fbd9b117f788af9191d3aa907', // 替换为你的API Key

        version: '2.0',

        plugins: ["AMap.Geocoder"]

      }).then(AMap => {

        this.map = new AMap.Map('container_1', {

          zoom: 10,

          center: [127.11, 23.11] // 初始中心点

        });

      }).catch(e => {

        console.error('地图加载失败', e);

      });

    },

    async goToLocation() {

      const [lng, lat] = [this.longitude, this.latitude];

      this.map.setZoom(15); // 设置缩放级别

      this.map.setCenter([lng, lat]);
    },
    handleCurrentChange(val) {//分页方法
      this.current = val;
      this.findPage();

    },
  },
  created() {
    this.findPage();//展示所有的数据
    this.initMap();
    // this.goToLocation()
  }
}

</script>
